<template>
  <div style="width: 100%;height: 100%;position: relative">
    <transition name="fade" appear>
      <el-result
          title="添加完成"
          sub-title="Added successfully"
          style="position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);"
      >
        <template #icon>
          <svg width="200" height="200">
            <circle class="circle" fill="none" transform="rotate(-90 100 100)" stroke="#68E534" stroke-width="10" cx="100"
                    cy="100" r="95" stroke-linecap="round" />
            <polyline class="tick" fill="none" stroke="#68E534" stroke-width="12" points="44,107 86.5,142 152,79"
                      stroke-linecap="round" stroke-linejoin="round"></polyline>
          </svg>
        </template>
        <template #extra>
          <el-button type="primary" @click="again">继续添加</el-button>
          <el-button type="primary" @click="backFilm">返回电影列表</el-button>
        </template>
      </el-result>
    </transition>
  </div>
</template>

<script setup>
import router from "@/router";

const backFilm = () => {
  router.push('/film');
};
const again = () => {
  router.push('/insert');
};
</script>

<style scoped>
</style>

<style>
.circle {
  stroke-dasharray: 597; /* 根据新的直径计算 */
  stroke-dashoffset: 597;
  animation: circle 1s ease-in-out forwards;
}

.tick {
  stroke-dasharray: 175; /* 按比例缩小 */
  stroke-dashoffset: 175;
  animation: tick 0.8s 0.95s ease-in-out forwards;
}

@keyframes circle {
  from {
    stroke-dashoffset: 597;
  }

  to {
    stroke-dashoffset: 1194;
  }
}

@keyframes tick {
  from {
    stroke-dashoffset: 175;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.el-result {
  --el-result-icon-font-size: 200px;
}
</style>